<template>
  <div id="app" class="app">
    <ChaCao :dataList="foods" titleName="食物">
      <!-- 插槽具名方法1 -->
      <div slot="aaa" class="aaa">
        <a href="https://www.baidu.com">baidu</a>
        <a href="https://www.baidu.com">qq</a>
      </div>
    </ChaCao>
    <ChaCao :dataList="games" titleName="游戏">
      <!-- 插槽具名方法2 省一个div -->
      <template slot="aaa">
        <div>g1</div>
        <div>g2</div>
      </template>
      <template slot="aaa">
        <div>g11</div>
        <div>g12</div>
        <hr />
      </template>
    </ChaCao>
    <ChaCao :dataList="games" titleName="游戏2">
      <!-- 插槽具名方法3 新方法 -->
      <template v-slot:bbb>
        <h3>test</h3>
      </template>
    </ChaCao>
  </div>
</template>

<script>
import ChaCao from "./components/ChaCao";
export default {
  name: "App",
  data: function () {
    return {
      foods: ["饺子", "拉面", "炒饭"],
      games: ["33号", "GTA5", "街霸6"],
    };
  },

  components: { ChaCao },

  methods: {
    getUserList() {},
  },
};
</script>

<style>
#app {
  display: flex;
  flex-direction: row;
  gap: 36px;
}
.aaa {
  display: flex;
  gap: 6;
  justify-content: space-between;
}
</style>